<script setup lang="ts">
import { ref } from "vue";
import { formRules } from "../utils/rule";
import { FormProps } from "../utils/types";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: null,
    title: "新增",
    teamName: "",
    decDate: "",
    relyOnUnit: "",
    masterUserId: undefined,
    secretaryUserId: undefined,
    userIds: [],
    baseInfo: "",
    masterInfo: "",
    longitudinalProjectIds: [],
    otherObtainRewardIds: [],
    achievementTransformationIds: [],
    paperIds: [],
    patentIds: [],
    horizontalProjectIds: [],
    resultInfo: ""
  }),
  userList: null,
  selectOpt: {}
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="120px"
    class="mr-12"
  >
    <div class="flex">
      <el-form-item label="科研团队名称" prop="teamName" class="flex-1">
        <el-input
          v-model="newFormInline.teamName"
          placeholder="请输入"
          class="!w-full"
        />
      </el-form-item>
      <el-form-item label="申报日期" prop="decDate" class="flex-1">
        <el-date-picker
          v-model="newFormInline.decDate"
          type="date"
          placeholder="请选择"
          value-format="YYYY-MM-DD"
          class="!w-full"
        />
      </el-form-item>
    </div>
    <div class="flex">
      <el-form-item label="依托单位" prop="relyOnUnit" class="flex-1">
        <el-input
          v-model="newFormInline.relyOnUnit"
          placeholder="请输入"
          class="!w-full"
        />
      </el-form-item>
      <el-form-item label="负责人" prop="masterUserId" class="flex-1">
        <el-select
          v-model="newFormInline.masterUserId"
          clearable
          placeholder="请选择"
          class="!w-full"
        >
          <el-option
            v-for="item in props.userList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </div>
    <div class="flex">
      <el-form-item label="团队秘书" prop="secretaryUserId" class="flex-1">
        <el-select
          v-model="newFormInline.secretaryUserId"
          clearable
          placeholder="请选择"
          class="!w-full"
        >
          <el-option
            v-for="item in props.userList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="团队人员" prop="userIds" class="flex-1">
        <el-select
          v-model="newFormInline.userIds"
          clearable
          multiple
          placeholder="请选择"
          class="!w-full"
        >
          <el-option
            v-for="item in props.userList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </div>

    <el-form-item label="团队基本情况" prop="baseInfo">
      <el-input
        v-model="newFormInline.baseInfo"
        type="textarea"
        :rows="6"
        placeholder="请输入"
      />
    </el-form-item>

    <el-form-item label="团队带头人简介" prop="masterInfo">
      <el-input
        v-model="newFormInline.masterInfo"
        type="textarea"
        :rows="6"
        placeholder="请输入"
      />
    </el-form-item>

    <h3 class="text-black mb-5 ml-6">团队研究基础 (2021年1月以来)</h3>
    <div class="flex">
      <el-form-item
        label="纵向项目情况"
        prop="longitudinalProjectIds"
        class="flex-1"
      >
        <el-select
          v-model="newFormInline.longitudinalProjectIds"
          clearable
          multiple
          placeholder="请选择"
          class="!w-full"
        >
          <el-option
            v-for="item in props.selectOpt.zxList"
            :key="item.id"
            :label="item.verticalProjectName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="横向项目情况"
        prop="horizontalProjectIds"
        class="flex-1"
      >
        <el-select
          v-model="newFormInline.horizontalProjectIds"
          clearable
          multiple
          placeholder="请选择"
          class="!w-full"
        >
          <el-option
            v-for="item in props.selectOpt.hxList"
            :key="item.id"
            :label="item.verticalProjectName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </div>
    <div class="flex">
      <el-form-item label="论文情况" prop="paperIds" class="flex-1">
        <el-select
          v-model="newFormInline.paperIds"
          clearable
          multiple
          placeholder="请选择"
          class="!w-full"
        >
          <el-option
            v-for="item in props.selectOpt.lwList"
            :key="item.id"
            :label="item.paperName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="专利情况" prop="patentIds" class="flex-1">
        <el-select
          v-model="newFormInline.patentIds"
          clearable
          multiple
          placeholder="请选择"
          class="!w-full"
        >
          <el-option
            v-for="item in props.selectOpt.zlList"
            :key="item.id"
            :label="item.patentName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </div>
    <div class="flex">
      <el-form-item label="获奖情况" prop="otherObtainRewardIds" class="flex-1">
        <el-select
          v-model="newFormInline.otherObtainRewardIds"
          clearable
          multiple
          placeholder="请选择"
          class="!w-full"
        >
          <el-option
            v-for="item in props.selectOpt.hjList"
            :key="item.id"
            :label="item.obtainRewardAchievementName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="成果转化"
        prop="achievementTransformationIds"
        class="flex-1"
      >
        <el-select
          v-model="newFormInline.achievementTransformationIds"
          clearable
          multiple
          placeholder="请选择"
          class="!w-full"
        >
          <el-option
            v-for="item in props.selectOpt.cgzhList"
            :key="item.id"
            :label="item.patentName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </div>

    <el-form-item
      label="团队工作计划与预期结果"
      class="text-right"
      prop="resultInfo"
    >
      <el-input
        v-model="newFormInline.resultInfo"
        type="textarea"
        :rows="6"
        placeholder="请输入"
      />
    </el-form-item>
  </el-form>
</template>
